import React,{Suspense} from 'react';
import {  Layout, Menu,Breadcrumb,theme  } from 'antd';
import { Outlet, useNavigate} from 'react-router-dom'
import {
    GatewayOutlined ,
    BarChartOutlined,
    SettingOutlined,
    TeamOutlined,
    
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
type MenuItem = Required<MenuProps>['items'][number];
const { Content,  Sider } = Layout;
interface Props{

}
function StaffIndex(props: Props) {
    const navigate = useNavigate()
    const {
        token: { colorBgContainer },
      } = theme.useToken();

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
      ): MenuItem {
        return {
          key,
          icon,
          children,
          label,
        } as MenuItem;
      }
    const items: MenuItem[] = [
        getItem('员工管理', 'sub1', <TeamOutlined />, [
            getItem('花名册', '/index/staff/roster'),
            getItem('员工档案', '/index/staff/record'),
           
        ]),
        getItem('员工关系', 'sub2', <GatewayOutlined />,
            [
                getItem('入职管理', '/index/staff/entry'),
                  
            ]
        ),
        getItem('统计分析', 'sub3', <BarChartOutlined />, [
          getItem('员工概况', '/index/staff/person'),
        
       
          getItem('入职员工分析', '/index/staff/count'),
          
        ]),
        getItem('员工设置', 'sub4', <SettingOutlined />,
            [
                getItem('人事审批表单设置', '/index/staff/approval'),
                getItem('人事规则设置', '/index/staff/regulation'),
            ]
        ),
       
    ];
    const onClick = (e:any) => {
        navigate(e.key)
    }
    return (
        <div className='staff-index'>
            <Layout style={{ minHeight: '100vh'}} >
      <Sider theme='light' >

                    <Menu theme="light" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={(e) => { onClick(e) }} />
      </Sider>
                <Layout className="site-layout">
                <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
                    <Content style={{ margin: '0 16px', background: colorBgContainer}} >

                    <Suspense fallback={<div className='loading'><img src="https://hbimg.b0.upaiyun.com/42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658" alt="" /></div>}>

                    <Outlet></Outlet>
</Suspense>  

   
         
        </Content>
      </Layout>
    </Layout>
        </div>
    );
}

export default StaffIndex;